<%- include('../../common/header.html',{css:'no-common'}) %>

<style type="text/css">
    .content {
        padding-top: 30px;
        padding-bottom: 50px;
    }

    /* Apply these styles only when #preview-pane has
       been placed within the Jcrop widget */
    .jcrop-holder #preview-pane {
        display: block;
        position: absolute;
        z-index: 2000;
        top: 10px;
        right: -280px;
        padding: 6px;
        border: 1px #eee solid;
        background-color: white;

        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;

        -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
    }

    /* The Javascript code will set the aspect ratio of the crop
       area based on the size of the thumbnail preview,
       specified here */
    #preview-pane .preview-container {
        width: 107px;
        height: 142px;
        overflow: hidden;
    }

    .img-upload {
        width: 450px;
        height: 450px;
        overflow: hidden;
        border: 1px solid #ddd;
        text-align: center;
    }

    .img-upload img {

        max-width: 100%;
        max-height: 100%;
        display: block;;
    }

    .user-thumb-update .upload-tips {
        display: none;
    }

    .user-thumb-update:hover .upload-tips {
        display: block;
    }

</style>
<title>用户管理-后台管理系统</title>
</head>
<body class="sub-body">
<%- include('../../common/top-nav.html') %>
<%- include('../../common/page-title.html') %>
<div class="content" style="padding-top: 0px;">
    <div class="panel panel-default">
        <div class="panel-body" style="min-height: 500px !important;">
            <fieldset style="margin-top: 10px;">
                <legend>上传封面</legend>
            </fieldset>
            <fieldset style="margin-top: 10px;">
                <div>
                    <p style="position: relative;min-height:50px;min-width:150px;" class="user-thumb-update">
                        <img id="upload"
                             style="position: absolute;height: 50px;width: 50px;border: 1px solid #e1e1e1;"
                             src="/admin/imgs/upload/UPLOAD.png" alt="">
                        <img class="upload-tips"
                             style="position: absolute;height: 50px;width: 50px;border: 1px solid #e1e1e1;"
                             src="/admin/imgs/upload/UPLOAD.png" alt="">
                        <input type="file" id="file1" accept="image/*" name="file" style="display: none;">
                    <div class="hp-clear"></div>
                    </p>
                    <p>
                        <%-include('../../component/btn.html',{label:' 保 存 ',class_:'save'}) %>
                    </p>
                </div>
            </fieldset>
            <fieldset style="margin-top: 10px;">
                <legend>预览</legend>
            </fieldset>
            <p class="preview-upload-image">

            </p>
            <%-include('../../component/jcrop.html')%>
        </div>
    </div>
</div>
</body>
<%- include('../../common/script-ajax-file-upload.html') %>
<%- include('../../common/script-jcrop.html') %>
<%- include('../../common/script-common.html') %>
<!-- build:js ../../scripts/sys/category/img.js  -->
<script type="text/javascript" src="img.js"></script>
<!--endbuild -->

</html>